import { getAssetsImages } from '@/utils'
import { defineComponent } from 'vue'
import styles from './news.module.less'
export default defineComponent({
  setup() {
    const listData = [
      {
        date: '09 / 16',
        path: getAssetsImages('new1.webp'),
        name: '2024高考家长互助交流群，专家实时解答报考疑问！'
      },
      {
        date: '08 / 27',
        path: getAssetsImages('new2.webp'),
        name: '2024年高校艺术类专业招生简章汇总'
      },
      {
        date: '07 / 16',
        path: getAssetsImages('new3.webp'),
        name: '2024年高考志愿填报指南 高考志愿填报手册'
      },
      {
        date: '04 / 15',
        path: getAssetsImages('new4.webp'),
        name: '这些专业“人满为患”，除非进入名校否则就业困难'
      }
    ]
    return () => (
      <div class={styles['news-layout']}>
        <div class={styles['news-box']}>
          <div class={styles['header-text']} data-aos="fade-up">
            新闻中心
          </div>
          <div class={styles['line-box']}></div>
          <p class={styles['msg-text']} data-aos="fade-up" data-aos-delay="100">
            News Center
          </p>
          <div class={styles['year-box']} data-aos="fade-up" data-aos-delay="100">
            <span class={styles['number-text']}>2024</span>
            <span class={styles['text-box']}>年度</span>
          </div>
          <div class={styles['top-line']}></div>
          <ul class={styles['list-box']} data-aos="fade-up" data-aos-delay="100">
            {listData.map(item => {
              return (
                <li class={styles['li-item']}>
                  <span class={styles['top-date']}>{item.date}</span>
                  <img src={item.path} alt="" class={styles['img-box']} />
                  <span class={styles['bottom-box']}>{item.name}</span>
                </li>
              )
            })}
            <div class={styles['footer-box']}></div>
          </ul>
        </div>
      </div>
    )
  }
})
